<script lang="ts" setup name="XtxOrder">
import { ApiRes } from '@/types/data'
import { OrderListInfo } from '@/types/order'
import request from '@/utils/request'
import { ref, watch } from 'vue'
import OrderItem from './components/order-item.vue'
const orderState = ref(0)
const active = ref('all')
const orderStatus = [
  { name: 'all', label: '全部订单' },
  { name: 'unpay', label: '待付款' },
  { name: 'deliver', label: '待发货' },
  { name: 'receive', label: '待收货' },
  { name: 'comment', label: '待评价' },
  { name: 'complete', label: '已完成' },
  { name: 'cancel', label: '已取消' }
]
const changeIndex = (index: number) => {
  orderState.value = index
}
// 订单列表总信息
const orderList = ref<OrderListInfo>({} as OrderListInfo)
const loadData = async () => {
  // 根据参数获取订单列表信息
  const res = await request.get<ApiRes<OrderListInfo>>('/member/order', {
    params: {
      orderState: orderState.value
    }
  })
  // console.log(res)
  orderList.value = res.data.result
}

watch(
  orderState,
  value => {
    loadData()
    console.log(1)
  },
  { immediate: true }
)
</script>

<template>
  <!-- <OrderItem v-if="!orderList" order="item" /> -->
  <div class="member-order">
    <XtxTabs v-model="active" @update:index="changeIndex">
      <XtxTabsPane v-for="item in orderStatus" :key="item.name" :name="item.name" :label="item.label">
        <div class="order-list">
          <!-- <OrderItem v-if="!orderList" order="item" /> -->
          <OrderItem v-for="item in orderList.items" :key="item.id" :order="item" />
        </div>
      </XtxTabsPane>
      <XtxTabsPane name="item" label="item.label" />
    </XtxTabs>
  </div>
</template>

<style scoped lang="less">
.order-list {
  background-color: #fff;
  padding: 20px;
}
</style>
